<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>房源搜索</title>
  <link rel="stylesheet" th:href="@{/airent/plugins/bootstrap/bootstrap-4.4.1-dist/css/bootstrap.min.css}">
  <link rel="stylesheet" th:href="@{/airent/common/css/nav.css}">
  <link rel="stylesheet" th:href="@{/airent/css/searchhouse.css}">
  <link rel="stylesheet" th:href="@{/airent/common/css/footer.css}">
  <link rel="stylesheet" th:href="@{/airent/plugins/font-awesome-4.7.0/css/font-awesome.min.css}">
  <link rel="stylesheet" th:href="@{/airent/plugins/other/animate.min.css}" />
  <script th:src="@{/airent/js/vue.js}"></script>
  <style type="text/css">
    html {
      height: 100%
    }

    body {
      height: 100%;
      margin: 0px;
      padding: 0px
    }

    #container {
      width: 100%;
      height: 450px;
      border: #ccc solid 1px;
    }
  </style>
  <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=nGGIg5o99yFrRmVRM5sgX9LUi39ObA3Y"></script>
</head>

<body>
<div id="app">
  <!--引入导航栏-->
  <div th:replace="~{head/topbar::topBar}"></div>
  <div class="search-box col-md-12">
    <div class="search-input-box row">
      <div class="input-group animate__animated animate__fadeInUp col-md-6 offset-md-3">
        <input id="search-input" type="text" class="form-control" placeholder="请输入区域、地址开始找房" name="searchHouse" :value="searchHouse"  v-model="house.searchHouse"/>
        <span class="input-group-btn">
          <button id="search-button" class="btn btn-success animate__animated animate__pulse" type="button" v-on:click="search()">开始找房</button>
        </span>
      </div>
    </div>
    <div class="search-check-continer row">
      <div class="col-md-10 col-md-1 search-check">
        <form action="">
          <div class="search-check-box col-md-10 offset-md-1" >
            <span id="area"><b>区域：</b></span>

            <div class="form-check form-check-inline" v-for="(area,index) in areas.slice(0,9)" >
              <input class="form-check-input" type="radio" name="cityArea" id="inlineradio1"  :value="area" v-model="house.cityArea"/>
              <label class="form-check-label" for="inlineradio1">{{area}}</label>
            </div>
            <!--有点烦，还要手动换行，有没有更简单的方法？？？-->
            <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <div class="form-check form-check-inline" v-for="(area,index) in areas.slice(9,18)">
              <input class="form-check-input" type="radio" name="cityArea" id="inlineradio2"  :value="area" v-model="house.cityArea"/>
              <label class="form-check-label" for="inlineradio1">{{area}}</label>
            </div>
            <!--有点烦，还要手动换行，有没有更简单的方法？？？-->
            <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <div class="form-check form-check-inline" v-for="(area,index) in areas.slice(18,27)">
              <input class="form-check-input" type="radio" name="cityArea" id="inlineradio3"  :value="area" v-model="house.cityArea"/>
              <label class="form-check-label" for="inlineradio1">{{area}}</label>
            </div>

          </div>
          <div class="search-check-box col-md-10 offset-md-1">
            <span><b>方式：</b></span>

            <div class="form-check form-check-inline">
              <input class="form-check-input" type="radio" name="rentType" id="inlineradio31" value="整租" v-model="house.rentType"/>
              <label class="form-check-label" for="inlineradio31">整租</label>
            </div>
            <div class="form-check form-check-inline">
              <input class="form-check-input" type="radio" name="rentType" id="inlineradio32" value="合租" v-model="house.rentType">
              <label class="form-check-label" for="inlineradio32">合租</label>
            </div>
          </div>

          <div class="search-check-box col-md-10 offset-md-1">
            <span><b>租金：</b></span>

            <div class="form-check form-check-inline">
              <input class="form-check-input" type="radio" name="rentPrice" id="inlineradio41" value="0" v-model="house.rentPrice"/>
              <label class="form-check-label" for="inlineradio41">≤1000元</label>
            </div>
            <div class="form-check form-check-inline">
              <input class="form-check-input" type="radio" name="rentPrice" id="inlineradio42" value="1000" v-model="house.rentPrice"/>
              <label class="form-check-label" for="inlineradio42">1000-2000元</label>
            </div>
            <div class="form-check form-check-inline">
              <input class="form-check-input" type="radio" name="rentPrice" id="inlineradio43" value="2000" v-model="house.rentPrice"/>
              <label class="form-check-label" for="inlineradio43">2000-3000元</label>
            </div>
            <div class="form-check form-check-inline">
              <input class="form-check-input" type="radio" name="rentPrice" id="inlineradio44" value="3000" v-model="house.rentPrice"/>
              <label class="form-check-label" for="inlineradio44">3000-4000元</label>
            </div>
            <div class="form-check form-check-inline">
              <input class="form-check-input" type="radio" name="rentPrice" id="inlineradio45" value="4000" v-model="house.rentPrice"/>
              <label class="form-check-label" for="inlineradio45">4000-5000元</label>
            </div>
            <div class="form-check form-check-inline">
              <input class="form-check-input" type="radio" name="rentPrice" id="inlineradio46" value="5000" v-model="house.rentPrice"/>
              <label class="form-check-label" for="inlineradio46">5000-6000元</label>
            </div>
            <div class="form-check form-check-inline">
              <input class="form-check-input" type="radio" name="rentPrice" id="inlineradio47" value="6000" v-model="house.rentPrice"/>
              <label class="form-check-label" for="inlineradio47">&ge;6000元</label>
            </div>
          </div>

          <div class="search-check-box col-md-10 offset-md-1">
            <span><b>户型：</b></span>

            <div class="form-check form-check-inline">
              <input class="form-check-input" type="radio" name="houseTypeId" id="inlineradio51" value="一室" v-model="house.houseTypeId"/>
              <label class="form-check-label" for="inlineradio51">一室</label>
            </div>
            <div class="form-check form-check-inline">
              <input class="form-check-input" type="radio" name="houseTypeId" id="inlineradio52" value="两室" v-model="house.houseTypeId"/>
              <label class="form-check-label" for="inlineradio52">两室</label>
            </div>
            <div class="form-check form-check-inline">
              <input class="form-check-input" type="radio" name="houseTypeId" id="inlineradio53" value="三室" v-model="house.houseTypeId"/>
              <label class="form-check-label" for="inlineradio53">三室</label>
            </div>
            <div class="form-check form-check-inline">
              <input class="form-check-input" type="radio" name="houseTypeId" id="inlineradio54" value="四室" v-model="house.houseTypeId"/>
              <label class="form-check-label" for="inlineradio54">四室</label>
            </div>
          </div>
          <div class="search-check-box col-md-10 offset-md-1">
            <span><b>朝向：</b></span>

            <div class="form-check form-check-inline">
              <input class="form-check-input" type="radio" name="orientation" id="inlineradio61" value="东" v-model="house.orientation"/>
              <label class="form-check-label" for="inlineradio61">东</label>
            </div>
            <div class="form-check form-check-inline">
              <input class="form-check-input" type="radio" name="orientation" id="inlineradio62" value="西" v-model="house.orientation"/>
              <label class="form-check-label" for="inlineradio62">西</label>
            </div>
            <div class="form-check form-check-inline">
              <input class="form-check-input" type="radio" name="orientation" id="inlineradio63" value="南" v-model="house.orientation"/>
              <label class="form-check-label" for="inlineradio63">南</label>
            </div>
            <div class="form-check form-check-inline">
              <input class="form-check-input" type="radio" name="orientation" id="inlineradio64" value="北" v-model="house.orientation"/>
              <label class="form-check-label" for="inlineradio64">北</label>
            </div>
          </div>
          <div class="search-check-box col-md-10 offset-md-1">
            <span><b>楼层：</b></span>

            <div class="form-check form-check-inline">
              <input class="form-check-input" type="radio" name="floor" id="inlineradio71" value="1" v-model="house.floor"/>
              <label class="form-check-label" for="inlineradio71">低楼层</label>
            </div>
            <div class="form-check form-check-inline">
              <input class="form-check-input" type="radio" name="floor" id="inlineradio72" value="2" v-model="house.floor"/>
              <label class="form-check-label" for="inlineradio72">中楼层</label>
            </div>
            <div class="form-check form-check-inline">
              <input class="form-check-input" type="radio" name="floor" id="inlineradio73" value="3" v-model="house.floor"/>
              <label class="form-check-label" for="inlineradio73">高楼层</label>
            </div>
          </div>
          <div class="search-check-box col-md-10 offset-md-1">
            <span><b>电梯：</b></span>

            <div class="form-check form-check-inline">
              <input class="form-check-input" type="radio" name="elvator" id="inlineradio81" value="0" v-model="house.elvator"/>
              <label class="form-check-label" for="inlineradio81">有电梯</label>
            </div>
            <div class="form-check form-check-inline">
              <input class="form-check-input" type="radio" name="elvator" id="inlineradio82" value="1" v-model="house.elvator"/>
              <label class="form-check-label" for="inlineradio82">无电梯</label>
            </div>
          </div>


        </form>
        {{house.searchHouse}}|{{house.cityArea}}|{{house.rentType}}|{{house.rentPrice}}|{{house.houseTypeId}}|{{house.orientation}}|{{house.floor}}|{{house.elvator}}

      </div>
    </div>
  </div>

  <!--<div class="more-check-link col-md-2 offset-md-5">
    <small><a id="more-check-btn" style="cursor:pointer">查看更多↓</a></small>
    </div>-->
  <hr>
  <div class="search-result-box row col-md-10 offset-md-1">
    <div class="search-result-nav col-md-8">
      <div class="btn-group col-md-9 " role="group" aria-label="btn-nav">
        <button type="button" class="btn btn-success nav-button">房源列表</button>
        <button type="button" class="btn btn-success nav-button">价格升序</button>
        <button type="button" class="btn btn-success nav-button">面积升序</button>
        <div id="find-house-num">
          已为您找到<span id="house-num">3691</span>套好房
        </div>
      </div>

    </div>
    <div class="search-result-list col-md-8">
      <div class="search-result-card">
        <div class="card result-card animate__animated animate__flipInX" style="width: 100%;">
          <div class="row no-gutters">
            <div class="col-md-2">
              <a href="#"><img th:src="@{/airent/imgs/house.png}" class="card-img" alt="图片加载失败"></a>
            </div>
            <div class="col-md-9 offset-md-1">
              <div class="card-body">
                <a href="housedesc.html">
                  <span><span class="card-title">房源信息标题</span>&nbsp;&nbsp;<span class="badge badge-secondary">要啥有啥</span>&nbsp;<span class="badge badge-secondary">十全十美</span></span>
                </a>
                <p class="card-text"><small class="text-muted">房源内容描述...</small></p>
                <div class="card-text row">
                  <div class="col-md-2"><small class="text-muted">地区地址</small></div>
                  <div class="col-md-2"><small class="text-muted">xxm<sup>2</sup></small></div>
                  <div class="col-md-2"><small class="text-muted">朝向</small></div>
                  <div class="col-md-3"><small class="text-muted">x厅x室x卫x厨</small></div>
                  <div class="col-md-2 offset-md-1"><small class="text-muted"><a href="#" class="card-link">
                    <i class="fa fa-heart-o collect-icon">&nbsp;收藏</i>
                  </a></small></div>
                </div>
                <div class="mark-house-price">1666元/月</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div id="house-page">
        <nav aria-label="Page navigation example">
          <ul class="pagination">
            <li class="page-item">
              <a class="page-link" href="#" aria-label="Previous">
                <span aria-hidden="true">&laquo;</span>
              </a>
            </li>
            <li class="page-item"><a class="page-link" href="#">1</a></li>
            <li class="page-item"><a class="page-link" href="#">2</a></li>
            <li class="page-item"><a class="page-link" href="#">3</a></li>
            <li class="page-item">
              <a class="page-link" href="#" aria-label="Next">
                <span aria-hidden="true">&raquo;</span>
              </a>
            </li>
          </ul>
        </nav>
      </div>
    </div>

    <div class="col-md-4 right-card">
      <div class="card map-search row">
        <a href="searchmap.html"><img id="map-img" class="card-img" th:src="@{/airent/imgs/map.jpg}" alt="图片加载失败"></a>
        <div class="card-img-overlay">
          <a href="searchmap.html"><svg class="bi bi-geo-alt" style="margin-top:-30px;margin-bottom:20px" width="3em"
                                        height="3em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd"
                  d="M8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10zm0-7a3 3 0 1 0 0-6 3 3 0 0 0 0 6z" />
          </svg></a>
          <a href="searchmap.html">
            <h3 class="card-title">地图找房</h3>
          </a>
          <a href="searchmap.html">
            <p class="card-text">使用地图帮您精准定位房源</p>
          </a>
        </div>
      </div>
      <div class="card recommend-list row">
        <div class="recommend-title">
          <span>
            <h4>推荐房源</h4>
          </span>
        </div>
        <div class="card recommend-card col-md-8 offset-md-2" style="width: 18rem;">
          <a href="#"><img class="card-img-top" th:src="@{/airent/imgs/house.png}" alt="图片加载失败"></a>
          <div class="card-body">
            <a href="#">
              <h6 class="card-title"><b>房源标题</b></h6>
            </a>
            <div><a href="#" class="card-link">
              <i class="fa fa-heart-o collect-icon">&nbsp;收藏房源</i>
            </a></div>
            <div><a href="#" class="card-link"><span style="color: red;">1666元/月</span></a></div>

          </div>
        </div>
        <div class="card recommend-card col-md-8 offset-md-2" style="width: 18rem;">
          <a href="#"><img class="card-img-top" th:src="@{/airent/imgs/house.png}" alt="图片加载失败"></a>
          <div class="card-body">
            <a href="#">
              <h6 class="card-title"><b>房源标题</b></h6>
            </a>
            <div><a href="#" class="card-link">
              <i class="fa fa-heart-o collect-icon">&nbsp;收藏房源</i>
            </a></div>
            <div><a href="#" class="card-link"><span style="color: red;">1666元/月</span></a></div>


          </div>
        </div>

      </div>
    </div>
  </div>
  <div id="container" style="display: none;"></div>
  <!-- 引入底部 -->
  <div th:replace="~{food/bottombar::topBar}"></div>
</div>

<script th:src="@{/airent/plugins/jquery/jquery.min.js}"></script>
<script th:src="@{/airent/plugins/bootstrap/bootstrap-4.4.1-dist/js/bootstrap.min.js}"></script>
<script>
  var vueApp = new Vue({
    //获得托管区域
    el: "#app",
    data: {
      areas: [],
      house: {
        searchHouse:"",
        cityArea: "",
        rentType: "",
        rentPrice: "",
        houseTypeId: "",
        orientation: "",
        floor: "",
        elvator: ""
      }
    },
    created: function () {
      var city = "上海市";
      var str = "";
      var url = "/cityData";
      $.ajax({
        url: url,
        type: "GET",
        dateType: "json",
        success: function (d) {
          for (var i=0;i<d.length;i++){
            if (d[i].name==city){
              vueApp.areas = d[i].area
              //console.log(d[i].area)
            }
          }
        }
      });
    },
    methods:{
      search:function () {
        //alert(this.house.searchHouse)
        $.ajax({
          url: "/search/searchHouse",
          type: "post",
          dateType: "json",
          data:{
            searchHouse:vueApp.house.searchHouse,
            cityArea: vueApp.house.cityArea,
            rentType: vueApp.house.rentType,
            rentPrice: vueApp.house.rentPrice,
            houseTypeId: vueApp.house.houseTypeId,
            orientation: vueApp.house.orientation,
            floor: vueApp.house.floor,
            elvator: vueApp.house.elvator
          },
          success: function (d) {

          }
        });




      }



    }
  })

</script>
</body>

</html>
